<template>
  <m-container class="start-in">
    <in-work-top-cell :info="info" />

    <m-cell-group v-if="palletCode === '' || palletBarCode">
      <view class="df aic scan" @click="handleClick">
        <view class="img">
          <image src="@/static/pall.png"></image>
        </view>

        <text class="title" :class="{ active: palletCode }">
          {{ palletCode ? '托盘编号：' + palletCode : '等待扫描中...' }}
        </text>
      </view>
    </m-cell-group>

    <m-cell-group v-for="(item, index) in list" :key="index">
      <view class="box">
        <m-tag>{{ item.skuName }}</m-tag>
        <view class="item">
          <text class="title">SKU编号</text>
          <text>{{ item.skuCode }}</text>
        </view>
        <view class="item">
          <text class="title">零件图号</text>
          <text>{{ item.skuPartNo }}</text>
        </view>
        <view class="item">
          <text class="title">入库数量</text>
          <text>X{{ item.packageQuantity }}</text>
        </view>
        <view class="box__item" v-if="item.palletCodeSkuList.length">
          <in-work-code
            broder
            :modal="{ ...it, barcode: it.skuBarcode || it }"
            v-for="(it, index) in item.palletCodeSkuList"
            :key="index"
            :status-type="it.status ? barCodeStatusMap[it.status].type : 'primary'"
            :status-txt="it.status ? barCodeStatusMap[it.status].txt : '未入库'"
          ></in-work-code>
        </view>
      </view>
    </m-cell-group>

    <m-fixed>
      <m-button v-if="palletCode === ''" width="100%" size="xl" @click="handleClick"> 请扫描托盘码 </m-button>
      <m-button v-else width="100%" size="xl" @click="handleClickConfirm" :disabled="getDisabled"> 确认入库 </m-button>
    </m-fixed>
  </m-container>
</template>

<script>
const barcodeModel = uni.requireNativePlugin('iData-BarcodePlugin-BarcodeModule')
const globalEvent = uni.requireNativePlugin('globalEvent')
import { router } from '@/router'
import { palletCodeSkuList, getCurrentPalletCode } from '@/api/modules/in-work'
import { mapState } from 'vuex'
import { barCodeStatusMap } from '@/utils/constant'

export default {
  data() {
    return {
      options: {
        type: 'fastInWork',
      },
      palletCode: '',
      palletBarCode: null,
      list: [],
      loading: false,
      barCodeStatusMap,
    }
  },
  computed: {
    ...mapState({
      info: (state) => state.inWork.info,
    }),
    getIsSystem() {
      return this.options.type === 'systemInWork'
    },
    getDisabled() {
      return (this.getIsSystem ? this.palletCode === '' : false) || this.loading
    },
  },
  onUnload() {
    barcodeModel.closeScan()
  },
  async onLoad(options) {
    this.palletCode = await getCurrentPalletCode({ inOrderId: this.info.inOrderId })
    this.options = options
    if (options.type === 'systemInWork') {
      this.list = this.info.imsStockInOrderDetailList.filter((item) => {
        if (+this.options.status === 2) {
          const arr = item.palletCodeSkuList.filter((item) => item.status === 0)
          return !!arr.length
        }
        return item.checked
      })
    } else {
      this.list = this.info.imsStockInOrderDetailList
    }
    this.initScan()
  },
  methods: {
    initScan() {
      barcodeModel.initScan()
      globalEvent.addEventListener('iDataBarcodeEvent', async ({ barcode }) => {
        if (this.$Router.currentRoute.name !== 'StartIn') {
          return
        }

        if (barcode.startsWith('WMS-P-')) {
          const { total } = await palletCodeSkuList({
            palletCode: barcode,
          })
          if (total !== 0) {
            uni.showToast({
              title: '该托盘码已使用',
              icon: 'none',
            })
            return
          }
          this.palletCode = barcode
          this.palletBarCode = barcode
        } else {
          uni.showToast({
            title: '请扫描正确的托盘码',
            icon: 'none',
          })
        }
      })
    },
    handleClick() {
      barcodeModel.scanStart(() => {})
    },
    async handleClickConfirm() {
      this.loading = true
      try {
        if (this.getIsSystem && +this.options.status !== 2) {
          for (const modal of this.list) {
            const skuBarcodes = modal.palletCodeSkuList.filter((item) => typeof item === 'string')
            await this.$store.dispatch('inWork/setPalletCodeSkuAction', {
              ...this.info,
              palletCode: this.palletCode,
              ...modal,
              skuBarcodes,
              partNo: modal.skuPartNo,
            })
          }

          await this.$store.dispatch('inWork/setUpdateWorkOrderStatusAction', this.list)
        }
        this.loading = false
        router.replace({
          name: 'ConfirmIn',
          params: {
            type: this.options.type,
            inOrderId: this.info.inOrderId,
          },
        })
      } catch (e) {
        this.loading = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.start-in {
  .box {
    padding: 20rpx 0;
    .item {
      display: flex;
      color: #333;
      font-size: 30rpx;
      padding: 15rpx 20rpx 0rpx;
      flex: 1;
      .title {
        color: #748da7;
        width: 180rpx;
        font-size: 26rpx;
      }
    }
    &__item {
      padding: 0 20rpx;
    }
  }
  .scan {
    padding: 20rpx 25rpx;
    .img {
      width: 80rpx;
      height: 80rpx;
      background: #248dfa;
      border-radius: 50%;
      box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    image {
      width: 53rpx;
      height: 34rpx;
    }
    .title {
      font-size: 30rpx;
      font-weight: bold;
      text-align: center;
      display: flex;
      color: #16b0f3;
      margin-left: 30rpx;
      &.active {
        color: #333;
      }
    }
  }
}
</style>
